<template>
  <div id="app">
    <el-row :gutter="20">
      <!-- 左边 -->
      <el-col :span="5">
        <el-card>
          <div slot="header">推广信息</div>
          <div v-for="(promotion, index) in promotions" :key="index" style="margin-bottom: 10px;">
            <span>{{ promotion.title }}</span>
            <span style="float: right;">{{ promotion.status }}</span>
          </div>
        </el-card>
      </el-col>
      <!-- 中间 -->
      <el-col :span="14">
        <div>
          <div class="chat-content">
            <el-scrollbar>
              <div v-for="(message, index) in chatLog" :key="index"
                :class="{ 'user-message': message.from === 'user', 'bot-message': message.from === 'bot' }">
                <div class="message-content">{{ message.content }}<span class="message-time"
                    v-if="message.time">{{ message.time }}</span></div>
              </div>
            </el-scrollbar>
            <div class="scroll-bottom" ref="scrollBottom"></div>
          </div>
          <el-input v-model.lazy="userMessage" placeholder="输入消息..." @keyup.enter="sendMessage"></el-input>
          <el-button type="primary" @click="sendMessage">发送</el-button>
        </div>
      </el-col>
      <!-- 右边 -->
      <el-col :span="5">
        <el-card>
          <div slot="header">推广信息</div>
          <el-button type="primary" @click="invoke">测试</el-button>
          <div v-for="(promotion, index) in promotions" :key="index" style="margin-bottom: 10px;">
            <span>{{ promotion.title }}</span>
            <span style="float: right;">{{ promotion.status }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    largeModelInvoke
  } from "@/api/bot/gptbot.js"
  export default {
    data() {
      return {
        chatLog: [],
        userMessage: '',
        promotions: [{
            title: '高效问答',
            status: 'new'
          },
          {
            title: 'AI PPT',
            status: 'new'
          },
          {
            title: '唢呐音乐',
            status: 'new'
          },
          {
            title: '随心作画',
            status: ''
          },
          {
            title: '在线检索',
            status: ''
          },
          {
            title: '文档分析',
            status: ''
          }
        ]
      };
    },
    methods: {
      invoke(){
        let params = {
          text: 'fasdfasdf'
        }
        largeModelInvoke(params).then(res => {
          res.data
        })
      },
      sendMessage() {
        if (this.userMessage.trim() === '') return;
        this.chatLog.push({
          from: 'user',
          content: this.userMessage,
          time: this.getTime()
        });
        this.userMessage = '';
        this.generateBotResponse();
      },
      generateBotResponse() {
        setTimeout(() => {
          let response = "这是机器人的回复";
          this.chatLog.push({
            from: 'bot',
            content: response,
            time: this.getTime()
          });
        }, 500);
      },
      getTime() {
        const date = new Date();
        return `${date.getHours()}:${date.getMinutes()}:${date.getMilliseconds()}`;
      }
    },
    watch: {
      chatLog: {
        handler(newVal) {
          this.$nextTick(() => {
            console.log(newVal)
            const scrollBottom = this.$refs.scrollBottom;
            if (scrollBottom) {
              scrollBottom.scrollIntoView({
                behavior: 'smooth'
              });
            }
          });
        },
        deep: true
      }
    }
  };
</script>

<style>
  .chat-content {
    padding: 10px;
    border: 1px;
    border-radius: 10px;
    height: 500px;
    overflow-y: scroll;
    position: relative;
  }

  .user-message {
    color: #409eff;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    float: right;
    clear: both;
  }

  .bot-message {
    color: #67c23a;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    clear: both;
  }

  .message-content {
    border-radius: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .message-time {
    margin-left: 5px;
    font-size: 12px;
    color: #999;
  }

  .el-input {
    width: 90%;
    margin-top: 15px;
  }

  .el-button {
    margin-left: 10px;
  }

  .scroll-bottom {
    height: 10px;
    width: 100%;
    margin-top: 10px;
    position: relative;
  }
</style>
